fix(blog): ui improvements and comment layout fix by Adebesin-Cell · Pull Request #2139 · npmx-dev/npmx.dev

Adebesin-Cell · 2026-03-18T20:05:54Z

Summary

Reduced spacing in nested comments on mobile
Fixed blog content indentation alignment with header/authors
Fixed button-primary hover states in light mode
Fixed Bluesky embed icon positioning (equidistant from top/right edges)
Added hover effects for blog prose links
Reduced federated articles' hover shadow intensity
Fixed federated articles mobile alignment

Closes #2136, closes #2137

…-dev#2136, npmx-dev#2137) Redesign nested comments to use a flat, single-indent layout with collapsible reply threads. Fix blog content alignment, button hover states, Bluesky embed icon positioning, prose link hover effects, and federated articles shadow/alignment.

vercel · 2026-03-18T20:06:00Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 21, 2026 0:53am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 21, 2026 0:53am
npmx-lunaria	Ignored		Mar 21, 2026 0:53am

github-actions · 2026-03-18T20:06:51Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/az-AZ.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/cs-CZ.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/de-DE.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/fr-FR.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/id-ID.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/ja-JP.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/pl-PL.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/ru-RU.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/tr-TR.json	Localization changed, will be marked as complete. 🔄️
i18n/locales/zh-CN.json	Localization changed, will be marked as complete. 🔄️

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

codecov · 2026-03-18T20:08:08Z

Codecov Report

❌ Patch coverage is 62.50000% with 6 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/BlueskyComment.vue	53.84%	6 Missing ⚠️

📢 Thoughts on this report? Let us know!

…plies i18n key

coderabbitai · 2026-03-18T20:16:15Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

This pull request updates multiple blog-related Vue components and i18n locale files. Component changes adjust responsive layouts, avatar rendering and alignment, spacing in comment and post elements, nested-replies indentation, and Bluesky embed positioning and hover behaviour (BlueskyComment.vue, BlogPostFederatedArticles.vue, BlogPostWrapper.vue, BlueskyPostEmbed.client.vue). Ten locale files (az-AZ, cs-CZ, de-DE, fr-FR, id-ID, ja-JP, pl-PL, ru-RU, tr-TR, zh-CN) have revised wording and pluralisation for the blog.atproto.more_replies key.

Possibly related PRs

feat(i18n): complete some zh-CN translation #1868 — Modifies zh-CN blog translations including the blog.atproto.more_replies key (overlapping locale edit).
feat: polish colors and indents #1042 — Contains UI/style polishing for prose and indents that overlap spacing and link underline changes in BlogPostWrapper.vue.
fix(i18n): missing/updated Turkish and Azerbaijani translations #1928 — Edits tr-TR and az-AZ locale keys for blog.atproto.more_replies (overlapping locale updates).

Suggested reviewers

alexdln
ghostdevv
danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description accurately summarises the changeset, covering all major modifications including spacing adjustments, alignment fixes, hover effects, and icon positioning.
Linked Issues check	✅ Passed	The pull request addresses all coding requirements from issues `#2136` and `#2137`: blog content indentation alignment, Bluesky button hover states, embed icon positioning, prose link hover effects, federated articles styling, and nested comment spacing.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issues. The modifications to Vue components, i18n translations, and styling are within scope of the blog UI improvements and comment layout objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (2)

app/components/BlueskyCommentThread.vue (1)
38-38: Consider Vue 3.4+ same-name shorthand.

Since you're using Vue 3.5.30, you can simplify the binding using the same-name shorthand.
♻️ Suggested refactor
-    <BlueskyComment :comment="comment" />
+    <BlueskyComment :comment />
Based on learnings: "In Vue 3.4 and later, you can use same-name shorthand for attribute bindings: use :attributeName instead of :attributeName="attributeName" when binding to a variable with the same name in scope."
app/components/BlueskyComment.vue (1)

72-72: Remove the non-essential template comment at Line 72.

 is describing obvious markup and can be dropped to keep the template lean.

As per coding guidelines, “Add comments only to explain complex logic or non-obvious implementations.”

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f8d84945-1caf-45be-ac18-ac342f8d79f9

📥 Commits

Reviewing files that changed from the base of the PR and between 5d8fcf5 and 49a5022.

📒 Files selected for processing (9)

app/components/BlueskyComment.vue
app/components/BlueskyCommentThread.vue
app/components/BlueskyComments.vue
app/components/Link/Base.vue
app/components/global/BlogPostFederatedArticles.vue
app/components/global/BlogPostWrapper.vue
app/components/global/BlueskyPostEmbed.client.vue
i18n/locales/en.json
i18n/schema.json

coderabbitai

Actionable comments posted: 2

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 09bb1c82-0f32-4848-a2d7-06cc7d3bcfde

📥 Commits

Reviewing files that changed from the base of the PR and between 49a5022 and e3afaae.

📒 Files selected for processing (16)

i18n/locales/az-AZ.json
i18n/locales/cs-CZ.json
i18n/locales/de-DE.json
i18n/locales/en.json
i18n/locales/es.json
i18n/locales/fr-FR.json
i18n/locales/id-ID.json
i18n/locales/ja-JP.json
i18n/locales/pl-PL.json
i18n/locales/pt-BR.json
i18n/locales/ru-RU.json
i18n/locales/tr-TR.json
i18n/locales/uk-UA.json
i18n/locales/zh-CN.json
i18n/schema.json
test/unit/a11y-component-coverage.spec.ts

✅ Files skipped from review due to trivial changes (1)

i18n/locales/uk-UA.json

🚧 Files skipped from review as they are similar to previous changes (2)

i18n/locales/en.json
i18n/schema.json

i18n/locales/pt-BR.json

test/unit/a11y-component-coverage.spec.ts

Nested comments use inline avatar on mobile (Medium-style) for full content width, and classic avatar-column on desktop. Each nesting level costs ~12px on mobile instead of ~44px, eliminating horizontal scroll. Removes BlueskyCommentThread in favor of recursive depth.

app/components/global/BlogPostFederatedArticles.vue

app/components/global/BlogPostWrapper.vue

app/components/global/BlueskyPostEmbed.client.vue

app/components/Link/Base.vue

app/components/BlueskyComment.vue

- Use hover:shadow-fg/5 for federated articles shadow - Scope prose link hover to exclude no-underline links - Add group hover for Bluesky icon (blue on card hover) - Revert button-primary hover to original accent style - Use separate class/v-bind for avatar shrink-0 - Fix pt-BR duplicate JSON keys from merge conflict

app/components/BlueskyComment.vue

Handles unicode characters made up of multiple code points correctly.

ghostdevv · 2026-03-21T01:00:04Z

Looks like the comments have been addressed! We can do a follow up if we missed anything 🙏

Adebesin-Cell added 2 commits March 18, 2026 21:05

fix(i18n): add comment thread i18n keys for view/hide replies

f649c3b

Adebesin-Cell changed the title ~~fix(blog): UI improvements and Instagram-style comment redesign~~ fix(blog):ui improvements and Instagram-style comment redesign Mar 18, 2026

Adebesin-Cell changed the title ~~fix(blog):ui improvements and Instagram-style comment redesign~~ fix(blog): ui improvements and Instagram-style comment redesign Mar 18, 2026

vercel bot deployed to Preview – npmx.dev March 18, 2026 20:08 View deployment

Merge branch 'main' into fix/blog-ui-and-comment-redesign

49a5022

vercel bot deployed to Preview – docs.npmx.dev March 18, 2026 20:11 View deployment

vercel bot deployed to Preview – npmx.dev March 18, 2026 20:11 View deployment

fix: add a11y skip for BlueskyCommentThread and remove unused more_re…

e3afaae

…plies i18n key

coderabbitai bot reviewed Mar 18, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev March 18, 2026 20:19 View deployment

coderabbitai bot reviewed Mar 18, 2026

View reviewed changes

i18n/locales/pt-BR.json Outdated Show resolved Hide resolved

test/unit/a11y-component-coverage.spec.ts Outdated Show resolved Hide resolved

Adebesin-Cell and others added 2 commits March 18, 2026 21:38

[autofix.ci] apply automated fixes

a334522

Adebesin-Cell changed the title ~~fix(blog): ui improvements and Instagram-style comment redesign~~ fix(blog): ui improvements and comment layout fix Mar 18, 2026

vercel bot deployed to Preview – npmx.dev March 18, 2026 20:42 View deployment

alexdln reviewed Mar 18, 2026

View reviewed changes

Adebesin-Cell added 2 commits March 19, 2026 04:07

fix(blog): add spacing between comment author and text

8ecca37

vercel bot deployed to Preview – npmx.dev March 19, 2026 03:11 View deployment

Adebesin-Cell requested a review from alexdln March 19, 2026 17:22

Merge branch 'main' into fix/blog-ui-and-comment-redesign

306077d

vercel bot deployed to Preview – docs.npmx.dev March 20, 2026 19:08 View deployment

vercel bot deployed to Preview – npmx.dev March 20, 2026 19:08 View deployment

ghostdevv reviewed Mar 20, 2026

View reviewed changes

app/components/BlueskyComment.vue Outdated Show resolved Hide resolved

fix: use Intl.Segmenter for avatar first character extraction

520a5df

Handles unicode characters made up of multiple code points correctly.

vercel bot deployed to Preview – npmx.dev March 20, 2026 22:03 View deployment

fix: correct Intl.Segmenter constructor signature

652014c

vercel bot deployed to Preview – npmx.dev March 20, 2026 22:09 View deployment

fix: small segmenter optimisation

e1aaaa7

ghostdevv approved these changes Mar 21, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev March 21, 2026 00:53 View deployment

ghostdevv added this pull request to the merge queue Mar 21, 2026

Merged via the queue into npmx-dev:main with commit 882dcac Mar 21, 2026
20 checks passed

github-actions bot mentioned this pull request Mar 21, 2026

chore: release v0.5.0 #2096

Open

Uh oh!

Conversation

Adebesin-Cell commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

vercel bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecov bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ghostdevv commented Mar 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Adebesin-Cell commented Mar 18, 2026 •

edited

Loading

vercel bot commented Mar 18, 2026 •

edited

Loading

github-actions bot commented Mar 18, 2026 •

edited

Loading

codecov bot commented Mar 18, 2026 •

edited

Loading

coderabbitai bot commented Mar 18, 2026 •

edited

Loading